<template>
  <div id="news">
    <div class="newsTitle">
      <span :class="[showList==0?'active':'']" @click="tab(0)">{{$t("m.all")}}</span>
      <span
        :class="[showList==item.dictSort?'active':'']"
        @click="tab(item.dictSort)"
        v-for="(item,index) in typeList"
        :key="index"
      >{{item.dictLabel}}</span>
    </div>
    <div class="rootMain">
      <Scroll :on-refresh="onRefresh" :on-infinite="onInfinite">
        <div class="scroll-box" style="position:relative;">
          <div class="newsList" v-show="showList==0">
            <van-list
              v-model="loading"
              :loading-text="$t('m.loading')"
              :offset="100"
              :finished-text="$t('m.noMore')"
              :finished="finished"
              @load="onLoad"
            >
              <div
                class="newsItem"
                @click="newsDetail(item.id)"
                v-for="(item,index) in newList"
                :key="index"
              >
                <div class="left">
                  <div class="title">{{item.noticeName}}</div>
                  <div class="time">{{item.releaseTime}}</div>
                </div>
                <div class="right" v-if="item.noticeImage">
                  <img :src="item.noticeImage" alt />
                </div>
              </div>
            </van-list>
          </div>
          <div class="newsList" v-show="showList==1">
            <van-list
              v-model="loading"
              :loading-text="$t('m.loading')"
              :offset="100"
              :finished-text="$t('m.noMore')"
              :finished="finished"
              @load="onLoad"
            >
              <div
                class="newsItem"
                @click="newsDetail(item.id)"
                v-for="(item,index) in newList1"
                :key="index"
              >
                <div class="left">
                  <div class="title">{{item.noticeName}}</div>
                  <div class="time">{{item.releaseTime}}</div>
                </div>
                <div class="right" v-if="item.noticeImage">
                  <img :src="item.noticeImage" alt />
                </div>
              </div>
            </van-list>
          </div>
          <div class="newsList" v-show="showList==2">
            <van-list
              v-model="loading"
              :loading-text="$t('m.loading')"
              :offset="100"
              :finished-text="$t('m.noMore')"
              :finished="finished"
              @load="onLoad"
            >
              <div
                class="newsItem"
                @click="newsDetail(item.id)"
                v-for="(item,index) in newList2"
                :key="index"
              >
                <div class="left">
                  <div class="title">{{item.noticeName}}</div>
                  <div class="time">{{item.releaseTime}}</div>
                </div>
                <div class="right" v-if="item.noticeImage">
                  <img :src="item.noticeImage" alt />
                </div>
              </div>
            </van-list>
          </div>
          <div class="newsList" v-show="showList==3">
            <van-list
              v-model="loading"
              :loading-text="$t('m.loading')"
              :offset="100"
              :finished-text="$t('m.noMore')"
              :finished="finished"
              @load="onLoad"
            >
              <div
                class="newsItem"
                @click="newsDetail(item.id)"
                v-for="(item,index) in newList3"
                :key="index"
              >
                <div class="left">
                  <div class="title">{{item.noticeName}}</div>
                  <div class="time">{{item.releaseTime}}</div>
                </div>
                <div class="right" v-if="item.noticeImage">
                  <img :src="item.noticeImage" alt />
                </div>
              </div>
            </van-list>
          </div>
        </div>
      </Scroll>
    </div>
    <Footer></Footer>
  </div>
</template>
<script>
import Services from "@/service/index.js";
import { mapMutations, mapState } from "vuex";
import Header from "@/components/header";
import Footer from "@/components/footer";
import Scroll from "@/components/scroll";
import { formatDate } from "@/assets/js/filters.js";
import { Toast } from "vant";
export default {
  data() {
    return {
      loginToken: "",
      showList: 1,
      newList: [],
      newList1: [],
      newList2: [],
      newList3: [],
      loading: false,
      finished: false,
      currentPage: 0,
      sum: 0,
      index: 0,
      type: "",
      typeList: [],
      langType: 0
    };
  },
  created() {
    this.changeTitle(this.$t("m.news"));
    this.changetabbarIndex(1);
    this.loginToken = localStorage.getItem("token")
      ? localStorage.getItem("token")
      : "";
    if (localStorage.getItem("language") == "en_US") {
      this.langType = 1;
    } else {
      this.langType = 0;
    }
    this.getType();
    this.tab(0);
  },
  components: {
    Header,
    Footer,
    Scroll
  },
  computed: {},
  filters: {
    formatDate(time) {
      var data = new Date(time);
      return formatDate(data, "yyyy-MM-dd");
    }
  },
  methods: {
    ...mapMutations(["changeTitle", "changetabbarIndex"]),
    onRefresh(done) {
      this.currentPage = 0;
      setTimeout(() => {
        done();
        this.newList = [];
        this.newList1 = [];
        this.newList2 = [];
        this.newList3 = [];
        Toast(this.$t("m.refresh"));
        this.finished = false;
        this.getList(this.index, this.type);
      }, 2000);
    },
    onInfinite(done) {
      setTimeout(() => {
        done(0);
      });
    },
    onLoad() {
      //    console.log("上拉加载");
      setTimeout(() => {
        if (this.currentPage != 0 && this.currentPage * 10 >= this.sum) {
          this.finished = true;
          return;
        }
        this.getList(this.index, this.type);
      }, 500);
    },
    newsDetail(id) {
      this.$router.push(`/newsDetail?id=${id}`);
    },
    // 获取数据
    getList(index, type) {
      this.currentPage = this.currentPage + 1;
      Services.wdyNoticeList({
        noticeType: type,
        pageNum: this.currentPage,
        pageSize: 10,
        lang: localStorage.getItem("language"),
        zyType: this.langType
      }).then(res => {
        //      console.log(res);
        if (res.code == "0000") {
          if (index == 3) {
            this.newList3 = this.newList3.concat(res.list);
          } else if (index == 2) {
            this.newList2 = this.newList2.concat(res.list);
          } else if (index == 1) {
            this.newList1 = this.newList1.concat(res.list);
          } else {
            this.newList = this.newList.concat(res.list);
          }
          this.sum = res.page.total;
          this.loading = false;
          // 数据全部加载完成  停止懒加载
          if (this.currentPage * 10 >= this.sum) {
            this.finished = true;
            // console.log("加载完成");
          }
        } else {
          this.loading = false;
          this.finished = true;
          Toast(res.msg);
        }
      });
    },
    // 获取标题类型
    getType() {
      let titleType = "wdy_notice_type";
      if (this.langType == 1) {
        titleType = "wdy_goods_category_english";
      } else {
        titleType = "wdy_notice_type";
      }
      Services.wdyNoticeType({
        dictType: titleType,
        lang: localStorage.getItem("language"),
        zyType: this.langType
      }).then(res => {
        //      console.log(res);
        if (res.code == "0000") {
          if (res.sysDictData.length > 3) {
            res.sysDictData.length = 3;
          }
          this.typeList = res.sysDictData;
        } else {
          Toast(res.msg);
        }
      });
    },
    // 切换tab栏
    tab(index) {
      console.log(index);
      this.showList = index;
      if (index == 3) {
        this.type = 3;
        this.index = 3;
      } else if (index == 2) {
        this.type = 2;
        this.index = 2;
      } else if (index == 1) {
        this.type = 1;
        this.index = 1;
      } else {
        this.type = "";
        this.index = 0;
      }
      this.currentPage = 0;
      this.sum = 0;
      this.newList = [];
      this.newList1 = [];
      this.newList2 = [];
      this.newList3 = [];
      this.loading = true;
      this.finished = false;
      this.getList(this.index, this.type);
    }
  }
};
</script>
<style lang="scss" scoped type="text/scss">
#news {
  width: 100%;
  height: 100%;
  .newsTitle {
    padding: 0 0.3rem;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    height: 0.88rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    background: #fff;
    box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
    span {
      display: flex;
      justify-content: center;
      align-items: center;
      color: #a8a7ab;
      font-size: 0.22rem;
      height: 100%;
      letter-spacing: 0.02rem;
      padding: 0 0.1rem;
      position: relative;
      &.active {
        font-size: 0.3rem;
        font-weight: bold;
        color: #40404c;
        &::after {
          content: "";
          display: block;
          position: absolute;
          bottom: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 0.5rem;
          height: 0.05rem;
          background: #e4b577;
        }
      }
    }
  }
  .rootMain {
    height: calc(100% - 1.88rem);
    top: 0.88rem;
    color: #40404c;
    background: #f2f2f2;
    .newsList {
      padding: 0.3rem;
      .newsItem {
        min-height: 1.5rem;
        padding: 0.2rem 0.3rem;
        border-radius: 0.08rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        // border-bottom: 1px solid #efeded;
        background: #fff;
        margin-bottom: 0.15rem;
        box-shadow: 0 0.05rem 0.1rem rgba(0, 0, 0, 0.07);
        .left {
          flex: 1;
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          flex-direction: column;
          width: calc(100% - 2rem);
          .title {
            margin-bottom: 0.2rem;
            font-size: 0.24rem;
            letter-spacing: 0.04rem;
            font-weight: bold;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            color: #40404c;
          }
          .time {
            font-size: 0.22rem;
            color: #999;
          }
        }
        .right {
          margin-left: 0.5rem;
          width: 1.75rem;
          height: 1.25rem;
          background: #fefefe;
          display: flex;
          border-radius: 0.05rem;
          overflow: hidden;
        }
      }
    }
  }
}
</style>